<template>
	<el-dialog :visible.sync="visible" fullscreen append-to-body custom-class="user_learning_dialog">
		<export-word-button type="primary" plain :data="exportData" slot="title">导出记录</export-word-button>
		<div class="user_learning_record">
			<h1>{{ year }}年度在线教育培训情况记录表</h1>
			<div class="header">单位：{{ data.departName }}</div>
			<el-row class="table">
				<el-col :span="24">学号/工号：{{ data.userName || data.account }}</el-col>
				<el-col :span="24">教育培训情况：</el-col>
				<el-col :span="5"><strong>培训/考试时间</strong></el-col>
				<el-col :span="14"><strong>培训主要内容</strong></el-col>
				<el-col :span="2"><strong>类型</strong></el-col>
				<el-col :span="3"><strong>学时</strong></el-col>
				<!-- 循环 -->
				<el-col class="list" :span="24">
					<template v-if="tableData.length > 0">
						<el-row v-for="(item, index) in tableData" :key="index" type="flex">
							<el-col :span="5">{{ item.createTime }}</el-col>
							<el-col :span="14">{{ item.resName }}</el-col>
							<el-col :span="2">
								<template v-if="item.durationType === 'C'">
									<el-tag type="danger" size="small">课程</el-tag>
								</template>
								<template v-if="item.durationType === 'E'">
									<el-tag type="warning" size="small">考试</el-tag>
								</template>
							</el-col>
							<el-col :span="3">{{ item.duration }}</el-col>
						</el-row>
					</template>
					<el-empty v-else :image-size="160" description="暂无培训考试情况"></el-empty>
				</el-col>
				<!-- 循环 -->
				<el-col :span="24" class="column">
					<div class="title">所在单位意见</div>
					<div class="body">
						<p style="text-align: left">
							该人员年度参加保密教育培训累计达
							<strong>{{ data.totalStudyDuration }}</strong>
							学时
						</p>
						<p style="text-align: right">单位负责人签字（盖章）：__________________</p>
					</div>
				</el-col>
				<el-col :span="24" class="column">
					<div class="title">备注</div>
					<div class="body"></div>
				</el-col>
			</el-row>
		</div>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import moment from 'moment';
import { queryDurationList } from '@/api/front/sysDurationLog';
export default {
	props: {
		value: { type: Boolean, default: false },
		data: { type: Object, default: () => {} },
		year: { type: String, default: '' }
	},
	data() {
		return {
			visible: this.value,
			tableData: []
		};
	},
	computed: {
		dateRange() {
			let yearMoment = moment(this.year);
			let endTime = yearMoment.endOf('year').format('YYYY-MM-DD HH:mm:ss');
			let startTime = yearMoment.startOf('year').format('YYYY-MM-DD HH:mm:ss');
			return { startTime, endTime };
		},
		exportData() {
			let fields = ['createTime', 'resName', 'duration'];
			let userName = this.data.userName || this.data.account;
			return {
				year: this.year,
				docTitle: `${this.year}年度${userName}在线教育培训情况记录表`,
				allDatas: [
					{
						userName,
						...lodash.pick(this.data, ['departName', 'totalStudyDuration']),
						lists: this.tableData.map((item) => lodash.pick(item, fields))
					}
				]
			};
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		async visible(flag) {
			this.$emit('input', flag);
			if (!flag) {
				this.tableData = [];
			} else {
				this.getDurationList();
			}
		}
	},
	methods: {
		//获取时长列表
		async getDurationList() {
			let page = { page: 1, limit: 999 };
			let params = { ...page, ...this.dateRange, userId: this.data.id };
			let result = await queryDurationList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = result.data || [];
				this.tableData = datas.map((n) => {
					if (n.durationType === 'C') {
						return { ...n, resName: n.sysCourse?.title || '' };
					} else if (n.durationType === 'E') {
						return { ...n, resName: n.testExam?.name || '' };
					} else {
						return { ...n };
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
.user_learning_dialog {
	border-radius: 0;
	background-color: #ebeef5;
	.el-dialog__header {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		border-bottom: none;
		.el-button {
			padding: 10px 12px;
		}
	}
	.el-dialog__headerbtn {
		position: unset;
		margin-top: 10px;
		font-size: 14px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 12px;
		border-radius: 4px;
		background-color: #f4f4f5;
		border: 1px solid #d3d4d6;
		color: #909399;
		&:hover {
			background-color: #909399;
			border-color: #909399;
			color: #fff;
		}
		&::after {
			content: '关闭详情';
		}
	}
	.el-dialog__close {
		display: none;
	}
}
</style>
<style lang="scss" scoped>
.user_learning_record {
	width: 992px;
	min-height: 100%;
	background-color: #fff;
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	padding: 48px 36px;
	margin: 0 auto;
	h1 {
		font-size: 24px;
		font-weight: bold;
		color: #303133;
		text-align: center;
		margin-bottom: 24px;
	}
	.header {
		font-size: 15px;
		line-height: 1;
		margin-bottom: 16px;
	}
	.el-row.table {
		font-size: 15px;
		border-top: solid 1px #909399;
		border-left: solid 1px #909399;
	}
	.el-col {
		display: flex;
		align-items: flex-start;
		line-height: 24px;
		padding: 12px 16px;
		border-right: solid 1px #909399;
		border-bottom: solid 1px #909399;
		&.column {
			align-items: normal;
			padding: 0;
		}
		&.list {
			padding: 0;
			flex-direction: column;
			&:not(:has(.el-empty)) {
				border-right: none;
				border-bottom: none;
			}
			.el-row {
				width: 100%;
			}
		}
		.title {
			width: 48px;
			line-height: 48px;
			letter-spacing: 10px;
			padding: 16px 16px 6px;
			writing-mode: vertical-rl;
			border-right: solid 1px #909399;
		}
		.body {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			line-height: 32px;
			padding: 16px;
			flex: 1;
		}
	}
}
</style>
